<template>
  <div class="panel line">
    <h2>
      各煤种销量占比 <a href="javacript:;">2023</a
      ><a href="javascript:;">2024</a>
    </h2>
    <div ref="target" class="chart"></div>
    <div class="panel-footer"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
// const props = defineProps({
//   data: {
//     type: Object,
//     required: true,
//   },
// });
// console.log(props.data);
const target = ref(null);
// let是用来声明变量的，const是用来声明常量的
let myChart = null;
var options;
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});
const renderChart = () => {
  var datas = [
    {
      name: "精煤",
      value: 100,
      children: [
        {
          name: "本部",
          value: 70,
          children: [
            { name: "辛置矿", value: 40 },
            { name: "李雅庄矿", value: 30 },
            { name: "团柏矿", value: 30 },
          ],
        },
        {
          name: "汾河公司",
          value: 30,
          children: [
            { name: "三级1-2-1", value: 10 },
            { name: "三级1-2-2", value: 20 },
          ],
        },
        {
          name: "晋南",
          value: 30,
          children: [
            { name: "薛虎沟煤业", value: 10 },
            { name: "薛虎沟洗煤厂", value: 20 },
          ],
        },
        {
          name: "晋北",
          value: 30,
          children: [
            { name: "晋北煤业", value: 10 },
            { name: "晋北洗煤厂", value: 20 },
          ],
        },
      ],
    },
    {
      name: "中煤",
      value: 150,
      children: [
        {
          name: "本部",
          value: 70,
          children: [
            { name: "辛置矿", value: 40 },
            { name: "李雅庄矿", value: 30 },
            { name: "团柏矿", value: 30 },
          ],
        },
        {
          name: "汾河公司",
          value: 30,
          children: [
            { name: "赵城站", value: 10 },
            { name: "三交河", value: 20 },
            { name: "回坡底", value: 20 },
          ],
        },
        {
          name: "晋南",
          value: 30,
          children: [
            { name: "薛虎沟煤业", value: 10 },
            { name: "薛虎沟洗煤厂", value: 20 },
          ],
        },
        {
          name: "吕梁山",
          value: 30,
          children: [
            { name: "方山洗煤厂", value: 10 },
            { name: "全顺达洗煤厂", value: 20 },
          ],
        },
      ],
    },
    {
      name: "煤泥",
      value: 150,
      children: [
        {
          name: "本部",
          value: 70,
          children: [
            { name: "辛置矿", value: 40 },
            { name: "李雅庄矿", value: 30 },
            { name: "团柏矿", value: 30 },
          ],
        },
        {
          name: "汾河公司",
          value: 30,
          children: [
            { name: "赵城站", value: 10 },
            { name: "三交河", value: 20 },
            { name: "回坡底", value: 20 },
          ],
        },
        {
          name: "晋南",
          value: 30,
          children: [
            { name: "薛虎沟煤业", value: 10 },
            { name: "薛虎沟洗煤厂", value: 20 },
          ],
        },
        {
          name: "吕梁山",
          value: 30,
          children: [
            { name: "方山洗煤厂", value: 10 },
            { name: "全顺达洗煤厂", value: 20 },
          ],
        },
      ],
    },
  ];
  const allOptions = {};
  options = {
    //id: optionId,
    // title: {
    //   // text: data[0][2],
    //   // data: data[0][0],
    //   top: "3%",
    //   textStyle: {
    //     color: "#fff",
    //     fontSize: 16,
    //   },
    // },
    legend: {
      //orient: "vertical",
      left: "left",
      top: "3%",
      // 修改小图标的大小
      itemWidth: 10,
      itemHeight: 10,
      // 修改图例组件的文字为 12px
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12",
      },
    },
    series: {
      type: "pie",
      radius: "50%",
      data: datas,
      avoidLabelOverlap: false,
      label: {
        show: true,
      },
      // 链接文字和图形的线是否显示
      labelLine: {
        show: false,
      },
    },
    graphic: [
      {
        type: "text",
        right: 30,
        top: 10,
        style: {
          text: "返回",
          color: "#fff",
          fontSize: 12,
          fill: "white",
        },
        onclick: function () {
          goBack();
        },
      },
    ],
  };
  // A stack to remember previous option id
  var optionStack = [];
  const goForward = (optionId) => {
    optionStack.push(myChart.getOption().id); // push current option id into stack.
    console.log(optionId);
    //myChart.getOption().series.data =
    console.log();
    myChart.setOption(datas[optionId]);
  };
  const goBack = () => {
    console.log(optionStack);
    console.log("===================");
    optionStack.pop();
    if (optionStack.length > 0) {
      myChart.setOption({
        series: [
          {
            name: optionStack[0].name,
            data: optionStack[0].children,
          },
        ],
      });
    } else {
      myChart.setOption({
        series: [
          {
            data: datas,
          },
        ],
      });
    }
  };
  //options = allOptions["霍州煤电"]; // The initial option is the root data option
  const getNextLevelData = (index) => {
    console.log(datas);
    return datas[index];
  };
  myChart.on("click", "series", (params) => {
    // //goForward(params.dataIndex);

    // // datas = params.data;
    // // console.log(datas[params.dataIndex].children);
    // var dataIndex = params.dataIndex;
    // console.log(dataIndex);
    // if (params.componentType === "graphic") {
    //   alert("返回被点击了");
    //   console.log(params);
    //   return;
    // }

    // // 此处应该根据dataIndex进行逻辑处理，例如获取下一级的数据
    // var nextLevelData = getNextLevelData(dataIndex);
    // console.log(nextLevelData);
    // //var nextChart = echarts.init(target.value);
    // var nextOption = {
    //   series: [
    //     {
    //       name: "下一级分类",
    //       data: nextLevelData.children,
    //     },
    //   ],
    // };
    // myChart.setOption(nextOption);
    // // 显示下一级饼图
    // //nextChart.setOption(nextOption);
    if (params.data.children) {
      myChart.setOption({
        series: [
          {
            name: params.data.name,
            data: params.data.children,
          },
        ],
      });
      optionStack.push(params.data);
      console.log("加入的数据：");
      console.log(optionStack);
    } else {
      console.log("到底了");
    }
  });
  options && myChart.setOption(options);
  //跟随屏幕一起缩放
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );
</script>

<style></style>
